<!--
 * @Author: your name
 * @Date: 2020-02-25 13:32:39
 * @LastEditTime: 2020-03-19 13:47:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \福路德扫码系统\html\cksm.html
 -->
<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0,viewport-fit=cover" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>Hello APP</title>
	<link rel="stylesheet" type="text/css" href="../css/vant.css">
	<link rel="stylesheet" type="text/css" href="../css/base.css" />
	<link rel="stylesheet" type="text/css" href="../css/local.css" />
	<script type="text/javascript" src="../script/jquery.js"></script>
	<script type="text/javascript" src="../script/echarts.js"></script>
	<script type="text/javascript" src="../script/vue.min.js"></script>
	<script type="text/javascript" src="../script/vant.min.js"></script>
	<script type="text/javascript" src="../script/fastclick.js"></script>
	<script type="text/javascript" src="../script/base.js"></script>
	<script type="text/javascript" src="../script/app-tree.js"></script>
	<style type="text/css">
		.content {
			background: #f2f2f2 !important;
		}

		.center {
			text-align: center;
		}

		.user {
			padding-top: 4px;
			padding-left: 15px;
			color: #fff;

		}

		.head {
			background: linear-gradient(to right, #18b2ff, #2894ff);
			padding: 30px 10px 10px 10px;
			overflow: hidden;
		}

		.head .van-search {
			padding: 0;
			border-radius: 17px !important;
		}

		.head .van-search>div {
			border-radius: 17px !important;
		}

		.banner {
			width: 100%;
			background: linear-gradient(to bottom right, #18b3ff, #3775ff);
			color: #fff;
		}

		.banner-show {
			padding: 20px 15px 0 15px;
		}

		.banner-value {
			padding: 15px;
			background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
		}

		.banner .title {
			font-size: 12px;
		}

		.banner .value {
			font-size: 25px;
			padding: 10px 0 30px 0;
		}

		.banner .svalue {
			font-size: 18px;
			padding-top: 4px;
		}

		.module {
			padding: 8px 10px 0 10px;
		}

		.module>div {
			background: #fff;
			padding: 8px;
			border-radius: 8px;
			overflow: hidden;
		}

		.label {
			font-size: 13px;
			line-height: 20px;
		}

		.label .squ {
			background: #3775ff;
			width: 5px;
			height: 16px;
			display: inline-block;
			border-radius: 2px;
			margin-top: 2px;
			margin-right: 8px;
		}

		.img {
			width: 46px;
			height: 46px;
			line-height: 22px;
			text-align: center;
			border-radius: 23px;
			padding: 11px;
			position: relative;
			color: #fff;
			font-size: 28px;
		}

		.img img {
			height: 24px;
			vertical-align: middle;
		}

		.img-text {
			font-size: 12px;
			margin-top: 6px;
			text-align: center;
			height: 30px;
		}

		.van-grid-item__content {
			background: transparent;
			padding-bottom: 0px;
		}

		.chart {
			height: 250px;
			margin: 0 -8px;
		}

		.select>* {
			vertical-align: middle;
			color: #3775ff;
		}

		.more {
			padding-left: 10px;
			border-left: 1px solid #d8d8d8;
		}

		.hot>div {
			padding: 5px 0;
			border-bottom: 1px solid #f3f3f3;
		}

		.hot-label {
			font-size: 16px;
			/* font-weight: 700; */
			padding-bottom: 10px;
			padding-left: 10px;
		}

		.hot-title {
			padding-bottom: 4px;
			font-size: 20px;
			font-weight: 700;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;

		}

		.hot-svalue {
			color: #686f82;
			font-size: 12px;
			padding-bottom: 6px;
		}

		.str {
			background: #f9fafc;
			overflow: hidden;
		}

		.str>div {
			font-weight: normal;
			color: #686f82;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<div class="box">
			<div class="head flex-box">
				<div class="flex-main">
					<form action="">
						<van-search v-model="searchKey" placeholder="请输入产品关键词查询库存" @search="headSearch"></van-search>
					</form>

				</div>
				<!-- <div class="user">
					<van-icon name="chat-o" size="28px"></van-icon>
				</div> -->
			</div>
			<div class="content">
				<div class="banner">
					<div class="banner-show" @click="openTitleWin('xsdd_his','销售订单汇总')">
						<div class="title">本月销售金额（元）</div>
						<div class="value">{{mainData?mainData.SOMoney:'0.00'}}</div>
					</div>

					<div class="banner-value">
						<van-row gutter="20">
							<van-col span="6">
								<div @click="openTitleWin('yqdd_his','延期订单汇总')">
									<div class="title center">延期订单数</div>
									<div class="svalue center">{{mainData?mainData.YQOrderNUM:'0'}}</div>
								</div>
							</van-col>
							<van-col span="6">
								<div @click="openTitleWin('cgdd_his','采购订单汇总')">
									<div class="title center">采购金额</div>
									<div class="svalue center">{{mainData?mainData.SiMoney:'0'}}</div>
								</div>

							</van-col>
							<van-col span="6">
								<div @click="openTitleWin('dzp','呆滞品清单')">
									<div class="title center">呆滞品数</div>
									<div class="svalue center">{{mainData?mainData.DeadStockNum:'0'}}</div>
								</div>

							</van-col>
							<van-col span="6">
								<div @click="openTitleWin('kcyj','库存预警')">
									<div class="title center">库存预警</div>
									<div class="svalue center">{{mainData?mainData.InventoryWarning:'0'}}</div>
								</div>

							</van-col>
						</van-row>
					</div>
				</div>
				<!-- <div class="module">
					<div class="label flex-box">
						<div><img style="height: 20px;margin-top: -3px;" src="../image/p-6.png" /></div>
						<div class="flex-main">
							<van-swipe style="height: 20px;" vertical :autoplay="5000" :show-indicators="false">
								<van-swipe-item>
									<div>今日有3条销售订单待处理,请及时处理</div>
								</van-swipe-item>
								<van-swipe-item>
									<div>今日生产计划进度有更新,请点击查看</div>
								</van-swipe-item>
								<van-swipe-item>
									<div>正在进行仓库盘点，请暂停出入库操作</div>
								</van-swipe-item>
							</van-swipe>
						</div>
						<div class="more">
							<span>更多</span>
						</div>
					</div>
				</div> -->

				<div class="module">
					<div>
						<div class="label flex-box">
							<div class="squ"></div>
							<div class="flex-main">常用功能</div>
							<div>
								<van-icon name="setting-o" size="16px" color="#3775ff"></van-icon>
							</div>
						</div>
						<div>
							<van-grid :column-num="4" :border="false">
								<van-grid-item v-for="row in usedList">
									<div class="img" :style="{background:row.AP_Colour}" @click="openWin(row)">
										<img :src="ip + row.PIC_PH" />
									</div>
									<div class="img-text">{{row.APFunName}}</div>
								</van-grid-item>


								<van-grid-item>
									<div class="img" style="background:linear-gradient(to right, #a6ada7 , #7e8a7f)"
										@click="openModulePage">
										<img src="../image/module/20.png" />
									</div>
									<div class="img-text">设置</div>
								</van-grid-item>

							</van-grid>
						</div>
					</div>

				</div>

				<!-- <div class="module">
					<div>
						<div class="label flex-box">
							<div class="squ"></div>
							<div class="flex-main">看板</div>
						</div>
						<div>
							<van-grid :column-num="4" :border="false">

								<van-grid-item v-for="row in moduleList" v-if="row.FunType == '看板'">
									<div class="img" :style="{background:row.AP_Colour}" @click="openWin(row)">
										<img :src="ip + row.PIC_PH" />
									</div>
									<div class="img-text">{{row.APFunName}}</div>
								</van-grid-item>

							</van-grid>
						</div>
					</div>

				</div> -->


				<div class="module">
					<div>
						<div class="label flex-box">
							<div><img style="height: 20px;vertical-align: initial;margin-right: 5px;"
									src="../image/hot.png" /></div>
							<div class="flex-main">
								<span>热销商品</span>
							</div>
							<!-- <div>
								<span>更多</span>
							</div> -->
						</div>
						<div class="hot">
							<div v-for="row in hotList">
								<div class="hot-label">{{row.ProductName}}</div>
								<div>
									<van-row>
										<van-col span="6">
											<div class="hot-title center" style="color: #ff7d41;">
												{{row.OrderMoney || 0}}</div>
											<div class="hot-svalue center">销售金额</div>
										</van-col>
										<van-col span="12">
											<div class="hot-title center">{{row.OrderQty || 0}}</div>
											<div class="hot-svalue center">销售数量</div>
										</van-col>
										<van-col span="6">
											<div class="str">
												<div class="hot-title center">{{row.FKCQty || 0}}</div>
												<div class="hot-svalue center">剩余库存</div>
											</div>
										</van-col>
									</van-row>
								</div>
							</div>

						</div>
					</div>

				</div>
				<!-- <div class="module">
					<div>
						<div class="label flex-box">
							<div class="squ"></div>
							<div class="flex-main">订单统计</div>
							<div class="select" id="select" @click="showSelect = true;">
								<span>{{actions[selectAction].name}}</span>
								<van-icon name="arrow-down" size="16px" color="#3775ff"></van-icon>
							</div>
						</div>
						<div class="chart" id="chart">

						</div>
					</div>

				</div> -->

			</div>
		</div>
		<van-action-sheet v-model="showSelect" :actions="actions" @select="onSelect"></van-action-sheet>
	</div>
</body>
<script type="text/javascript">
	var vm;
	apiready =  function () {

		// APP.exitApp();

		api.addEventListener({
			name: 'setCommonFunctions'
		}, function (ret, err) {
			var moduleArray = ret.value.moduleArray;
			window.localStorage.setItem('usedList', JSON.stringify(moduleArray));

			vm.getModuleList();
		})

		vm = new Vue({
			el: '#app',
			data: {
				showLoading: false,
				loadingDisabled: false,
				refreshLoading: false,
				showSelect: false,
				selectAction: 0,
				actions: [{ name: '近7天' }, { name: '本月' }, { name: '本年' }],
				roleList: [],
				searchKey: '',
				mainData: '',
				hotList: [],
				ip: 'http://' + APP.serverIP(),
				moduleList: [],
				usedList: []
			},
			created: function () {
				var that = this;
				setInterval(function () {
					that.getMainData();
				}, 5000)
				that.getMainData();

				that.getModuleList();

				// setTimeout(function () {
				// 	that.setCharts();
				// }, 200)



			},
			methods: {
				headSearch() {
					var that = this;
					api.openWin({
						name: 'kc',
						url: 'module/kc.html',
						reload: true,
						slidBackEnabled: false,
						allowEdit: false,
						pageParam: {
							titleName: '库存查询',
							productName: that.searchKey
						}
					})
				},
				isShowReport() {
					var that = this;
					var n = false;
					for (var i in that.moduleList) {
						if (that.moduleList[i].FunType == '报表') {
							n = true;
						}
					}
					return n;
				},
				getModuleList() {
					var that = this;
					APP.ajax('AP_GetUserNM', {}, function (res) {
						that.moduleList = res.ds;
						var usedList = [];
						var moduleArray = JSON.parse(window.localStorage.getItem('usedList'));
						if (moduleArray === null) {
							var localUsedList = [];
							for (var i in that.moduleList) {
								if (that.moduleList[i].IsMR == 1) {
									localUsedList.push(that.moduleList[i].APPFunID)
									usedList.push(that.moduleList[i])
								}
							}
							window.localStorage.setItem('usedList', JSON.stringify(localUsedList));
						}
						for (var i in that.moduleList) {
							for (var j in moduleArray) {
								if (that.moduleList[i].APPFunID == moduleArray[j]) {
									usedList.push(that.moduleList[i])
								}
							}
						}
						that.usedList = usedList;

					})
				},
				getMainData() {
					var that = this;
					APP.ajax('APP_HomeAhow1', {}, function (res) {
						that.mainData = res.ds[0];
					}, function (err) {

					})

					APP.ajax('APP_HotProduct', {}, function (res) {
						that.hotList = res.ds;
					}, function (err) {

					})
				},
				onSelect(item, index) {
					var that = this;
					that.showSelect = false;
					that.selectAction = index;
				},
				openModulePage() {
					var that = this;
					api.openWin({
						name: 'moduleConfig',
						url: 'moduleConfig.html',
						reload: true,
						slidBackEnabled: false,
						allowEdit: false
					})
				},
				setCharts() {
					var that = this;
					var myChart = echarts.init(document.getElementById('chart'));
					var option = {
						grid: {
							top: 30,
							left: 50,
							right: 50,
							bottom: 30
						},
						xAxis: {
							type: 'category',
							name: '时间',
							data: [1, 2, 3, 4, 5, 6, 7]
						},
						yAxis: {
							type: 'value',
							name: '订单数'
						},
						series: [{
							data: [82, 92, 90, 34, 190, 130, 120],
							type: 'line',
							smooth: true
						}]
					};
					myChart.setOption(option);

				},
				openPage(url) {
					var that = this;
					api.openWin({
						name: url,
						url: url + '.html',
						reload: true,
						slidBackEnabled: false,
						allowEdit: false
					})
				},
				openWin(row) {
					var that = this;
					var pageParam = {}
					if (row.Para) {
						var paraArray = row.Para.split(';');
						for (var i in paraArray) {
							var paraRowArray = paraArray[i].split('=');
							if (paraRowArray[1] == 'true') {
								paraRowArray[1] = true;
							}
							if (paraRowArray[1] == 'false') {
								paraRowArray[1] = false;
							}
							pageParam[paraRowArray[0]] = paraRowArray[1];
						}
					}
					pageParam.titleName = row.APFunName;
					api.openWin({
						name: row.AP_Link,
						url: 'module/' + row.AP_Link + '.html',
						reload: true,
						slidBackEnabled: false,
						allowEdit: false,
						pageParam: pageParam
					})
				},
				openTitleWin(url, str) {
					var that = this;
					var pageParam = {};
					pageParam.titleName = str;
					api.openWin({
						name: url,
						url: 'module/' + url + '.html',
						reload: true,
						slidBackEnabled: false,
						allowEdit: false,
						pageParam: pageParam
					})
				},
				loginOut() {
					var that = this;
					that.$dialog.confirm({
						title: '提示',
						message: '是否退出当前账号?'
					}).then(() => {

						window.localStorage.removeItem('userInfo');
						api.sendEvent({
							name: 'clearLoginInfo'
						});
						api.closeToWin({
							name: 'root'
						});
					}).catch(() => {

					});
				},
			}
		})
	};
</script>

</html>
